<template>
  <div class="user">
    <!-- 头部 -->
    <div class="userHeader">
      <!-- 搜索栏 -->
      <div class="searchSlot">
        <slot name="searchSlot"></slot>
      </div>
      <!-- 添加附加功能栏 -->
      <div class="btnSlot">
        <slot name="btnSlot"></slot>
      </div>
      <!-- 选择状态显示栏 -->
      <div class="tbBox">
        已选择{{num}}项，
        <a @click="toggleSelection()">清空</a>
      </div>
    </div>

    <!-- table数据栏 -->
    <div class="tableSlot">
      <!-- handleSelectionChange点击select事件 -->
      <el-table
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        :max-height="maxHeight"
        :stripe="stripe"
        border
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- 筛选列 -->
        <el-table-column type="selection" width="55"> </el-table-column>

        <!-- 循环 item.prop-->
        <el-table-column
          align="center"
          v-for="(item, index) in headerData"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :sortable="item.sortable"
        >
          <template slot-scope="scope">
            <div v-if="item.slot">
              <slot :name="item.prop" v-bind:row="scope.row"  v-bind:scope="scope" ></slot>
            </div>
            <div v-if="!item.slot">
              {{ tableData[scope.$index][item.prop]}}
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 页码 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentpage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "systemComponent",
  props: {
    headerData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    stripe: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    border: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    maxHeight: {
      type: Number,
      default: () => {
        return 600;
      },
    },
    // 当前第几页
    currentpage: {
      type: Number,
      default: () => {
        return 1;
      },
    },
    // 一页多少条
    pagesize: {
      type: Number,
      default: () => {
        return 10;
      },
    },
    //总条件
    total: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    multipleTable: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data(){
    return{
      num:0
    }
  },

  methods: {
    // 选中数量改变
    handleSelectionChange(val) {
      this.num=val.length
      console.log(val.length);
    },

    toggleSelection(){
      this.$refs.multipleTable.clearSelection();
    },

    // 页码处理
    handleSizeChange(val) {
      //val是默认传过来的，要好好记住
      this.$emit("SizeChange", val); //CurrentChange是名字，传的值为val
    },
    handleCurrentChange(val) {
      //val是默认传过来的，要好好记住
      let _self = this;
      _self.$emit("CurrentChange", val);
    },
    
  },
};
</script>

<style>
.tbBox {
  padding-left: 30px;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 35px;
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  border-radius: 5px;
}
</style>